<template>
    <el-container class="home-container">
        <!--头部-->
        <el-header>
            <el-aside class="header-logo" :width="isCollapse ? '64px' : '200px'" @click.native="refresh">
                <img src="../assets/logo.png" alt="logo" class="header_logo_image">
                <span class="header_title" v-show="!isCollapse">{{ title | strTailor(7) }}</span>
            </el-aside>
            <div class="header-center">
                <svg viewBox="64 64 896 896" data-icon="menu-unfold" width="1em" height="1em" fill="currentColor"
                     aria-hidden="true" focusable="false" class="" @click="toggleCollapse">
                    <path
                        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"></path>
                </svg>
            </div>
            <el-button type="info" @click="loginOut">退出</el-button>
        </el-header>
        <!--主体-->
        <el-container>
            <!-- 左侧菜单 -->
            <el-aside :width="isCollapse ? '64px' : '200px'">
                <!--        <div class="toggle-button" >|||</div>-->
                <el-menu
                    background-color="#313743"
                    text-color="#fff"
                    active-text-color="#409FFF"
                    :unique-opened="true"
                    :collapse="isCollapse"
                    :collapse-transition="false"
                    :router="true"
                    :default-active="activePath">
                    <el-menu-item index="/welcome">
                        <i class="el-icon-s-custom"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <!--一级菜单-->
                    <el-submenu :index="menu.id + ''" v-for="(menu,menuIndex) in menuList"
                                v-has-role="menu.meta ? menu.meta.hasRole : null" :key="menu.id">
                        <!--一级菜单的模板区域-->
                        <template slot="title">
                            <i class="iconfont" :class="icons[menuIndex]"></i>
                            <span>{{ menu.authName }}</span>
                        </template>

                        <!--二级菜单-->
                        <el-menu-item :index="subMenu.path" v-for="subMenu in menu.children" :key="subMenu.id"
                                      v-has-role="subMenu.meta ? subMenu.meta.hasRole : null"
                                      @click="saveNavState(subMenu.path)">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>{{ subMenu.authName }}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import {mapActions} from 'vuex'
import navList from "../router/navList.json"

const {title} = require("../setting")

export default {
    name: "Home",
    data() {
        return {
            title,
            menuList: [],
            icons: ['icon-users', 'icon-tijikongjian', 'icon-lock_fill', 'icon-shangpin', 'icon-danju', 'icon-baobiao'],
            isCollapse: false,
            activePath: '',// 被激活的链接地址
        }
    },
    created() {
        this.getMenuList();
        this.activePath = sessionStorage.getItem('activePath');
    },
    methods: {
        ...mapActions(['logout']),
        refresh() {
            this.$router.go(0)
        },
        loginOut() {
            // sessionStorage.removeItem('token');
            this.logout()
            this.$router.replace('/login');
        },
        getMenuList() {
            this.menuList = navList
        },
        // 点击按钮切换左侧菜单的折叠与展开
        toggleCollapse() {
            this.isCollapse = !this.isCollapse;
        },
        // 保存当前激活的路径
        saveNavState(activePath) {
            // 保存到sessionStorage中是为了在刷新的时候能够取出这个路径并将对应的菜单高亮
            sessionStorage.setItem('activePath', activePath);
            this.activePath = activePath;
        }
    }
}
</script>

<style scoped>
.home-container {
    height: 100%;
}

.el-header {
    background-image: linear-gradient(to right, #313743, #565671 80%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    padding: 0 50px 0 0;

}

.header-logo {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    user-select: none;
    background: transparent !important;
    overflow: hidden;
}

.header-center {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

/* 左侧菜单 */
.el-aside {
    background-color: rgb(49, 55, 67);
    color: white;
    transition: width 0.3s;
}

.iconfont {
    margin-right: 10px;
}

.el-menu {
    border-right: none;
}

.toggle-button {
    background-color: #4A5064;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    letter-spacing: 2px;
    cursor: pointer;
}

.header_logo_image {
    width: 30px;
    aspect-ratio: 1;
}

.header_title {
    font-size: 16px;
    font-weight: bold;
    min-width: 120px;
    overflow: hidden;
}


/* 右侧内容区 */
.el-main {
    background-color: rgb(233, 237, 241);
}


</style>
